<template>
	<view>
		<no-data v-if="!commentList || commentList.length <=0" desc="暂无评论"></no-data>
		<view v-else class="comment">
			<view class="comment-item" v-for="(item,index) in commentList" 
			:key="index">
				<view class="info">
					<image :src="item.userImage || '/static/images/banner1.jpg'"></image>
					<view class="user">
						<view class="">{{item.nickName}}</view>
						<view class="">{{$util.dateFormat(item.createDate)}}</view>
					</view>
					<text :class="{grey:!item.isGood}" class="icon-haoping2 iconfont"></text>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="replay" v-if="item.children" v-for="(childer,i) in item.children" :key="i">
					<text>{{childer.replyName}}讲师回复：</text>
					<text>{{childer.replyContent}}</text>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		props:{
			commentList:{
				type:Array,
				default:() =>[
					{
						"id": 1,
						"nickName": "梦小员",
						"userImage": null,
						"isGood": 1, // 1好评，0差评
						"content": "梦老师的课程内容好详细，值得学习！",
						"createDate": Date.now(), // 为了兼容小程序，不能使用 new Date()
						"children": {
							
						}// 回复
					},
				]
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.comment{
		font-size: 30rpx;
		padding: 0 36rpx;
		background-color: #fff;
		.comment-item{
			margin-top: 36rpx;
			border-bottom: $mxg-underline;
			.info{
				display: flex;
				align-items: center;
				image{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50rpx;
					margin-right: 20rpx;
				}
				.user{
					font-weight: bold;
					line-height: 33rpx;
					:last-child{
						color: #999;
						font-size: 25rpx;
						font-weight: normal;
					}
				}
				:last-child{
					margin-left: auto;
					font-size: 35rpx;
					color: #ff001b;
				}
				.grey{
					color: $mxg-text-color-grey;
				}
			}
			
			.content{
				margin: 25rpx 0;
			}
			
			.replay{
				background-color: #f8f9fb;
				padding: 15rpx;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				color: #7d828f;
			}
		}
	}
</style>
